<!DOCTYPE html>
<html>

	<head>
		<title>PDF-view</title>
		 <meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="../css/bulma/bulma.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	</head>

	<body>
		<div class="container ">
			<nav class="navbar">
				<div class="navbar-brand">
					<a class="navbar-item" href="http://bulma.io">
						<img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
					</a>

					<a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
						<span class="icon" style="color: #333;">
						<i class="fa fa-github"></i>
					</span>
					</a>

					<a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
						<span class="icon" style="color: #55acee;">
						<i class="fa fa-twitter"></i>
					</span>
					</a>

					<div class="navbar-burger burger" data-target="navMenubd-example">
						<span></span>
						<span></span>
						<span></span>
					</div>
				</div>

				<div id="navMenubd-example" class="navbar-menu">
					<div class="navbar-start">
						<div class="navbar-item has-dropdown is-hoverable">
							<a class="navbar-link  is-active" href="/documentation/overview/start/">
								首页
							</a>
							<div class="navbar-dropdown ">
								<a class="navbar-item " href="/documentation/overview/start/">
									Overview
								</a>
								<a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
									Modifiers
								</a>
								<a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
									Columns
								</a>
								<a class="navbar-item " href="http://bulma.io/documentation/layout/container/">
									Layout
								</a>
								<a class="navbar-item " href="http://bulma.io/documentation/form/general/">
									Form
								</a>
								<a class="navbar-item " href="http://bulma.io/documentation/elements/box/">
									Elements
								</a>

								<a class="navbar-item is-active" href="http://bulma.io/documentation/components/breadcrumb/">
									Components
								</a>

								<hr class="navbar-divider">
								<div class="navbar-item">
									<div>
										<p class="is-size-6-desktop">
											<strong class="has-text-info">0.5.1</strong>
										</p>

										<small>
										<a class="bd-view-all-versions" href="/versions">View all versions</a>
									</small>

									</div>
								</div>
							</div>
						</div>
						<div class="navbar-item has-dropdown is-hoverable">
							<a class="navbar-link " href="http://bulma.io/blog/">
								课程
							</a>
							<div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">

								<a class="navbar-item" href="/2017/08/03/list-of-tags/">
									<div class="navbar-content">
										<p>
											<small class="has-text-info">03 Aug 2017</small>
										</p>
										<p>New feature: list of tags</p>
									</div>
								</a>

								<a class="navbar-item" href="/2017/08/01/bulma-bootstrap-comparison/">
									<div class="navbar-content">
										<p>
											<small class="has-text-info">01 Aug 2017</small>
										</p>
										<p>Bulma / Bootstrap comparison</p>
									</div>
								</a>

								<a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
									<div class="navbar-content">
										<p>
											<small class="has-text-info">24 Jul 2017</small>
										</p>
										<p>Access previous Bulma versions</p>
									</div>
								</a>

								<a class="navbar-item" href="http://bulma.io/blog/">
									More posts
								</a>
								<hr class="navbar-divider">
								<div class="navbar-item">
									<div class="navbar-content">
										<div class="level is-mobile">
											<div class="level-left">
												<div class="level-item">
													<strong>Stay up to date!</strong>
												</div>
											</div>
											<div class="level-right">
												<div class="level-item">
													<a class="button bd-is-rss is-small" href="http://bulma.io/atom.xml">
														<span class="icon is-small">
														<i class="fa fa-rss"></i>
													</span>
														<span>Subscribe</span>
													</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="navbar-item has-dropdown is-hoverable">
							<div class="navbar-link">
								资源
							</div>
							<div id="moreDropdown" class="navbar-dropdown ">
								<a class="navbar-item " href="http://bulma.io/extensions/">
									<div class="level is-mobile">
										<div class="level-left">
											<div class="level-item">
												<p>
													<strong>Extensions</strong>
													<br>
													<small>Side projects to enhance Bulma</small>
												</p>
											</div>
										</div>
										<div class="level-right">
											<div class="level-item">
												<span class="icon has-text-info">
												<i class="fa fa-plug"></i>
											</span>
											</div>
										</div>
									</div>
								</a>
							</div>
						</div>
						<a class="navbar-item " href="http://bulma.io/expo/">
							<span class="bd-emoji">🎨</span> 问题
						</a>
						<a class="navbar-item " href="http://bulma.io/love/">
							<span class="bd-emoji">❤️</span> Love
						</a>
					</div>

					<div class="navbar-end">
						<div class="navbar-item">
							<div class="field is-grouped">
								<p class="control">
									<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">
										<span class="icon">
									<i class="fa fa-twitter"></i>
								</span>
										<span>
									Tweet
								</span>
									</a>

								</p>
								<p class="control">
									<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
										<span class="icon">
									<i class="fa fa-download"></i>
								</span>
										<span>Download</span>
									</a>
								</p>
							</div>
						</div>
					</div>
				</div>
			</nav>
			<hr>
		</div>

		<div class="container">
			<div class="columns">
				<div class="column highlight-full">
					<div class="box">
						<center>
							<a href="#the-canvas" class="prev pagination-previous">上一页</a>
							<span>Page: <span class="page_num"></span> / <span class="page_count"></span></span>
							<a href="#the-canvas" class="next pagination-next">下一页</a>
							跳转到<input type="text" class="pageJump" style="width: 25px">页
							<a class="button is-small is-primary pdfGo">go</a>
						</center>
						<div>
							<center>
								<canvas id="the-canvas" style="height: 600px; width: 80%;"></canvas>
							</center>
						</div>
						<center>
							<a href="#the-canvas" class="prev pagination-previous">上一页</a>
							<span>Page: <span class="page_num"></span> / <span class="page_count"></span></span>
							<a href="#the-canvas" class="next pagination-next">下一页</a>
							跳转到<input type="text" class="pageJump" style="width: 25px">页
							<a class="button is-small is-primary pdfGo">go</a>
						</center>
					</div>
				</div>
				<div class="column is-3">
					<div style="height: 700px;" class="box">
						<button class="button is-small">批注</button>
						<hr>
						<form>
							<textarea style="width: 230px; height: 80px"></textarea>
							<a class="button is-primary is-small">提交</a>
						</form>
						<div style="margin-top: 5px; height: 460px;overflow-y: scroll;overflow-x: hidden;">
							<div style="border-top:1px solid #EEEEEE ;height:auto;padding: 10px;">
								<li style="font-size: 18px;"> xxxxx </li>
								<li style="font-size: 5px;">2017/8/19 19:12</li>
								<p style="font-size: 15px;">在《速度与激情》系列电影的主力演员保罗·沃克意 外去世后，电影制作方希望通过制作一首歌曲以纪念和缅怀保罗[2] 。 作为该歌曲制作人之一的查理·普斯在2014年7月写了一段基本的歌词， 并将歌名取为《See You Again》，创作过程仅用时十分钟。</p>
							</div>
							<div style="border-top:1px solid #EEEEEE ;height:auto;padding: 10px;">
								<li style="font-size: 18px;"> xxxxx </li>
								<li style="font-size: 5px;">2017/8/19 19:12</li>
								<p style="font-size: 15px;">在《速度与激情》系列电影的主力演员保罗·沃克意 外去世后，电影制作方希望通过制作一首歌曲以纪念和缅怀保罗[2] 。 作为该歌曲制作人之一的查理·普斯在2014年7月写了一段基本的歌词， 并将歌名取为《See You Again》，创作过程仅用时十分钟。</p>
							</div>
							<div style="border-top:1px solid #EEEEEE ;height:auto;padding: 10px;">
								<li style="font-size: 18px;"> xxxxx </li>
								<li style="font-size: 5px;">2017/8/19 19:12</li>
								<p style="font-size: 15px;">在《速度与激情》系列电影的主力演员保罗·沃克意 外去世后，电影制作方希望通过制作一首歌曲以纪念和缅怀保罗[2] 。 作为该歌曲制作人之一的查理·普斯在2014年7月写了一段基本的歌词， 并将歌名取为《See You Again》，创作过程仅用时十分钟。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../dist/js/pdf.js"></script>
		<script>
			var url = '../tmp/jds.pdf';

			PDFJS.workerSrc = '../dist/js/pdf.worker.js';

			var pdfDoc = null,
				pageNum = 1,
				pageRendering = false,
				pageNumPending = null,
				scale = 0.8,
				canvas = document.getElementById('the-canvas'),
				ctx = canvas.getContext('2d');

			function renderPage(num) {
				pageRendering = true;
				// Using promise to fetch the page
				pdfDoc.getPage(num).then(function(page) {
					var viewport = page.getViewport(scale);
					canvas.height = viewport.height;
					canvas.width = viewport.width;

					// Render PDF page into canvas context
					var renderContext = {
						canvasContext: ctx,
						viewport: viewport
					};

					var renderTask = page.render(renderContext);

					renderTask.promise.then(function() {
						pageRendering = false;
						if(pageNumPending !== null) {
							// New page rendering is pending
							renderPage(pageNumPending);
							pageNumPending = null;
						}
					});
				});

				document.querySelectorAll('.page_num')[0].textContent = pageNum;
				document.querySelectorAll('.page_num')[1].textContent = pageNum;

			}

			var newLen = document.querySelector('#loadWidth');
			var whole = document.querySelector('#whole');
			var An = document.querySelector('#Annotation');
			//  var length = An.offsetLeft*6/5;
			function scroll() {
				var loadChange = document.querySelector('#Annotation');
				var scrollLength = document.body.scrollTop;
				var min = loadChange.offsetTop - scrollLength;
				if(min < 0) {
					loadChange.setAttribute('style', 'position:fixed;left:' + length + 'px;top:0px');

					if(scrollLength < 257) {
						loadChange.setAttribute('style', null);
					}
				}
			}

			function queueRenderPage(num) {
				if(pageRendering) {
					pageNumPending = num;
				} else {
					renderPage(num);
				}
			}

			function fuckJump() {
				var fuckNum = document.querySelectorAll('.pageJump');
				if(fuckNum[0]) {
					var newPage = parseInt(fuckNum[0].value)
				} else if(fuckNum[1]) {
					var newPage = parseInt(fuckNum[1].value)
				}
				pageNum = newPage;
				queueRenderPage(pageNum);
				renderPage(pageNum);
			}

			document.querySelectorAll('.pdfGo')[0].addEventListener('click', fuckJump);
			document.querySelectorAll('.pdfGo')[1].addEventListener('click', fuckJump);

			function onPrevPage() {
				if(pageNum <= 1) {
					return;
				}
				pageNum--;
				queueRenderPage(pageNum);
			}
			document.querySelectorAll('.prev')[0].addEventListener('click', onPrevPage);
			document.querySelectorAll('.prev')[1].addEventListener('click', onPrevPage);

			function onNextPage() {
				if(pageNum >= pdfDoc.numPages) {
					return;
				}
				pageNum++;
				queueRenderPage(pageNum);
			}
			document.querySelectorAll('.next')[0].addEventListener('click', onNextPage);
			document.querySelectorAll('.next')[1].addEventListener('click', onNextPage);

			PDFJS.getDocument(url).then(function(pdfDoc_) {
				pdfDoc = pdfDoc_;
				document.querySelectorAll('.page_count')[0].textContent = pdfDoc.numPages;
				document.querySelectorAll('.page_count')[1].textContent = pdfDoc.numPages;

				renderPage(pageNum);
			});

			document.addEventListener('keyup', function(e) {
				key = e.keyCode || e.which;
				if(key == 37) onPrevPage();
				if(key == 39) onNextPage();
			})
		</script>
	</body>

</html>